<template>
    <!-- 页面的根视图元素 -->
    <view>
        <!-- 浏览器组件，用于显示网页内容 -->
        <web-view :src="url" class="web"></web-view>
    </view>
</template>

<script setup>
    // 从 Vue 导入 ref 函数
    import { ref } from 'vue'
    // 从 uni-app 导入 onLoad 函数
    import { onLoad } from '@dcloudio/uni-app'
    // 导入自定义的配置文件
    import { CONFIG } from '../../utils/config';
    // 导入用户状态存储
    import { userStore } from "../../store/userStore";
    // 创建用户状态存储的实例
    let store = userStore()
    // 存储网页 URL 的响应式变量
    let url = ref("")
    // 在页面加载时调用的函数
    onLoad((data) => {
        // 获取传入的数据中的 type 属性
        let type = data.type
        console.log(type)
        // 我在哪里
        if (type == 1) {
            // 当 type 为 1 时，构建显示自己位置的 URL
            url.value = `https://m.amap.com/navi/?dest=${store.currentPos.longitude},${store.currentPos.latitude}&destName=
                我的位置&hideRouteIcon=1&key=${CONFIG.gaode_key}&jscode=${CONFIG.gaode_skey}`
            // 设置导航栏标题为 "我的位置"
            uni.setNavigationBarTitle({
                title: "我的位置"
            })
        } else if (type == 2) {
            // 当 type 为 2 时，获取传入的数据中的经纬度和名称信息
            let lat = data.lat
            let lon = data.lon
            console.log(store.currentPos)
            // 构建从当前位置到指定位置的导航 URL
            url.value = `https://m.amap.com/navi/?start=${store.currentPos.longitude},${store.currentPos.latitude}&dest=${lon},${lat}
            &destName=${data.name}&key=${CONFIG.gaode_key}&jscode=${CONFIG.gaode_skey}`
            console.log(url.value)
            // 设置导航栏标题为 "到[名称]的路径"
            uni.setNavigationBarTitle({
                title: "到" + data.name + "的路径"
            })
        }
    })
</script>

<style>
    /* 对 web-view 组件的样式设置 */
  .web {
        width: 100%;
        height: 100vh;
    }
</style>